 <style type="text/css">
/* 图片展示样式 */
.images_zone{position:relative; width:120px;height:120px; overflow:hidden; float:left; margin:3px 5px 3px 0; background:#f0f0f0;border:5px solid #f0f0f0; }
.images_zone span{display:table-cell;text-align: center;vertical-align: middle;overflow: hidden;width: 120px;height: 120px;}
.images_zone span img{width:120px; vertical-align: middle;}
.images_zone a{text-align:center; position:absolute;bottom:0px;left:0px;background:rgba(255,255,255,0.5); display:block;width:100%; height:20px;line-height:20px; display:none; font-size:12px;}
/* 进度条样式 */
.up_progress{width: 300px;height: 13px;font-size: 10px;line-height: 14px;overflow: hidden;background: #e6e6e6;margin: 5px 0;display:none;}
.up_progress .progress-bar{height: 13px;background: #11ae6f;float: left;color: #fff;text-align: center;width:0%;}
.fileinput_a{display:inline-block; width:120px; height:120px; background-image: url(assets/imgs/upload.jpg);  position:relative; overflow:hidden;}
.fileinput_a:hover{background-image: url(assets/imgs/upload.jpg); }
.fileinput_input{position:absolute; right:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);}
</style>
<div class="main_fr_mic" style="margin-bottom:10px;">
          <i class="glyphicon glyphicon-home"></i>
          <a href="admin/index">首页</a><span>></span>
          <a  class="active">系统管理</a><span>></span>
          <a class="active">轮播图管理</a>
</div>
 
<div id="interfaceList" class="main_fr_down over">
	<div class="main_fr_search over mb10">
		  <form id="search_submit" class="form-inline">
			  <div class="good_top22">
				  <span class="good_top021">条件查询</span>
				  <!-- <span class="good_top022">
				      <input type="button" onclick="search(1);" class="search_an01 anbg" value="查询">
		              <input type="reset" class="search_an01" value="取消">
				   </span> -->
			  </div>
			  <div class="main_fr_search_cx">
				标题<input name="figure.title" placeholder="请输入标题" type="text" class="srk" style="width:200px;"/>
					<input type="hidden" name="figure.type" value="1">
	              <!-- 	类型<select name="figure.type" class="srk type" style="width:200px;">
	              		<option value="1">首页轮播图</option>
	              		<option value="2">直播轮播图</option>
	              	</select> -->	
	              	状态<select name="figure.status" class="srk" style="width:200px;">
	              		<option value="1">开启</option>
	              		<option value="0">禁用</option>
	              	</select>
	              	<input type="button" onclick="search(1);" class="search_an01 anbg" value="查询">	
			  </div>
		  </form>
	</div>
	<div class="sh_search over mb10">
		<div class="over sh_search_table">
			
	<div class="over mb10" style=" position:relative;">
		<div class="good_top22" style="margin-bottom: 0px;">
		  <span class="good_top021">轮播图列表</span>
		  <span class="good_top022">
		  	@@if (ac(session.userId, 'figure/update')){
			 	<input type="button" onclick="update(0);" class="search_an01" value="新增">
			@@}
		   </span>
		 </div>
	</div> 
	</div>
	<table class="table table-bordered table-hover">
		<thead  class="table_heaer">
			<tr class="text-center">
				<th>标题</th>
<!-- 				<th>类型</th>
 -->				<th>添加时间</th>
				<th>状态</th>
				<th>操作</th> 
			</tr>
		</thead>
		<tbody id="projectTable">
		</tbody>
	</table>
	
	</div>
		<div id="pages" class="text-right"></div>	
	</div>
	
</div>

<!--  弹出层div-->
<div id="addFormDiv" class="hide" style="padding-top:15px;">
	<form class="form-horizontal" id="addForm">
		<input type="hidden" id="id" name="figure.id">
		<input type="hidden" name="figure.type" value="1">
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">标题名称</label>
			<div class="col-sm-9">
				<input type="text"  class="form-control" id="title" placeholder="请输入标题称" name="figure.title" minlength="2"  maxlength="100" required>
			</div>
		</div>
		<div class="form-group hide">
			<label for="exampleInputEmail2" class="col-sm-2 control-label">链接地址</label>
			<div class="col-sm-9">
				<input type="url" value="http://www.baidu.com" class="form-control" id="links" placeholder="请输入链接地址" name="figure.links">
			</div>
		</div> 
		<div class="form-group" id="image_content">
		    <label for="exampleInputEmail2" class="col-sm-2 control-label">轮播图图片</label>
			<div class="col-sm-9">
			    <div style="float:left;">
			        <div class="files" id="image_path"></div>
		            <div style="clear:both;"></div><div class="up_progress"><div class="progress-bar"></div></div>
		            <div style="clear:both;"></div>
			    </div>
			    <div style="float:left;" class="fileinput_a" id="image_fileDiv">
			    	<input class="fileinput_input" type="file" value="浏览" id="imageupload" name="image_files" data-url="upload/getFileUpload" multiple/>
                </div>
                <div style="float:left;" >
              		 上传图片要求：格式（gif，jpe?g，png）推荐宽高（1900X500）最大为 2M
			    </div>
			     <br><br><br><br>
	         	<div id="tishi" class="hide"><font color="red">请上传图片！</font></div>
	         </div>
	    </div>
		<!-- <div class="form-group">
			<label for="exampleInputEmail2" class="col-sm-2 control-label">类型</label>
			<div class="col-sm-9">
			<select id="type" name="figure.type" class="form-control" style="width:200px;">
              		<option value="1">首页轮播图</option>
              		<option value="2">直播轮播图</option>
              	</select>
			</div>
		</div> -->
		<div class="form-group">
			<label for="exampleInputEmail2" class="col-sm-2 control-label">状态</label>
			<div class="col-sm-9">
			<select id="status" name="figure.status" class="form-control" style="width:200px;">
              		<option value="1">开启</option>
              		<option value="0">禁用</option>
              	</select>
			</div>
		</div>
		<div class="form-group">
		<label for="exampleInputEmail2" class="col-sm-2 control-label"></label>
			<div class="col-sm-9">
			<button type="submit" class="btn btn-success">立即提交</button>
			<button type="reset" class="btn btn-default">重置</button>
			</div>
		</div>
		
	</form>
</div>
<!-- 在这里引入本页面需要的js -->
 
<script>
function userList(data) {
	var dataStr = "";
	$.each(data, function(i, v) {
		dataStr += '<tr>';
		dataStr += '<td>' + v.title + '</td>';
	/* 	if(v.type==1){
			dataStr += '<td>首页轮播图</td>';
		}else{
			dataStr += '<td>直播轮播图</td>';
		} */
		dataStr += '<td>' + v.create_time + '</td>';
		if(v.status==0){
			dataStr += '<td>禁用</td>';
		}else if(v.status==1) {
			dataStr += '<td>开启</td>';
		}
		dataStr += '<td>';
			@@if (ac(session.userId, 'figure/update')){
				dataStr += '<a href="javaScript:update(' + v.id + ');" class="btn btn-default">' + '编辑' + '</a>';
			@@}
			@@if (ac(session.userId, 'figure/del')){
				dataStr += '<a recordId="' + v.id + '" class="btn btn-default deleteButton">' + '删除' + '</a>';
			@@}
			@@if (ac(session.userId, 'figure/upRow')){
				if(v.status==1){
					dataStr += '<a href="javaScript:upRow(' + v.id + ');" class="btn btn-default" title="下移"><i class="glyphicon glyphicon-arrow-down"></i></a>';
				}
			@@}
			@@if (ac(session.userId, 'figure/downRow')){
				if(v.status==1){
					dataStr += '<a href="javaScript:downRow(' + v.id + ');"class="btn btn-default" title="上移"><i class="glyphicon glyphicon-arrow-up"></i></a>';
				}
			@@}
			
		dataStr += '</td>'; 
		 
		dataStr += '</tr>';
	});
	$("#projectTable").html(dataStr);
	$("#projectTable .deleteButton").click(function() {
		clickDelete($(this));
		return false;
	})
}
var cc=1;
function pageChange(curr) {
	$.get("figure/list?curr="+curr, $("#search_submit").serialize(), function(data) {
		userList(data.content.list);
		laypage({
		    cont: $('#pages'), //容器。值支持id名、原生dom对象，jquery对象,
		    pages: data.content.totalPage, //总页数
		    skip: true, //是否开启跳页
		    skin: '#4599e0',
		    curr: data.content.pageNumber,
		    groups: 3, //连续显示分页数
		    jump: function(obj, first) {
		    	if(!first){ //一定要加此判断，否则初始时会无限刷新
		    		cc=obj.curr;
		    		pageChange(obj.curr);
		    	}
		    }
		});
	});
}
pageChange(1);
function search(curr){
	if(curr != 1){
		curr=cc;
	}
	pageChange(curr);
}
var index;
var validator;
$().ready(function() {
	 validator = $("#addForm").validate({
	        submitHandler:function(form){
	        	var img = $("#img").val();
	        	if(img==null || img ==""){
	        		$("#tishi").removeClass("hide");
        			return false;
	        	}else{
	        		$("#tishi").addClass("hide");
	        	}
	        	$.post('figure/update', $("#addForm").serialize(), function(data){
	        		if(data.code==0){
	        			layer.msg("保存成功！");
	        			layer.close(index);
	        			search(cc);
	        		}else{
	        			layer.msg("保存失败！");
	        			return false;
	        		}
	        		
	        	}) 
	        }    
	    });
	    $("#reset").click(function() {
	        validator.resetForm();
	    });

	});
function update(id) {
	var tit = "新增轮播图信息";
	if(id != 0){
		$.post("figure/getInfo",{id:id},function(data){
			if(data.code==0){
				for (var key in data.content){
					$("#"+key).val(data.content[key]);
				}
				var imgshow = '<div class="images_zone"><input type="hidden" id ="img" name="figure.img" value="'+data.content['img']+'" /><span><img src="'+data.content['img']+'"  /></span><a href="javascript:;">删除</a></div>';
	       	     $(".files").empty();
	       	     jQuery('#image_path').append(imgshow);	//将上传之后的图片放到image_path容器中
	       	     $("#image_fileDiv").addClass("hide");
		 		     
	       	  if(data.content['img']==null || data.content['img']==""){
						$("#image_path").empty();
						$("#image_fileDiv").removeClass("hide");
					}
			}else{
				layer.msg("获取信息失败！");
				return false;
			}
		})
		tit = "修改轮播图信息";
	}else{
		document.getElementById("addForm").reset();
		$("#id").val("");
		$("#image_path").empty();
		$("#image_fileDiv").removeClass("hide");
	} 
 	$("#addFormDiv").removeClass("hide");
	index=layer.open({
		type : 1,
		area: ['50%','60%'],
		title : tit,
		content : $("#addFormDiv"),
		
		cancel: function(index, layero) {
			 validator.resetForm();//// 重置表单验证提示
			    
			$("#addFormDiv").addClass("hide");
			layer.close(index);
		} 
	})
};
function clickDelete(obj) {
	// 给删除按钮注册事件
	// 获取当前记录的信息写入
	if(confirm("确定要删除该轮播图吗？")){
		var recordId = obj.attr("recordId");
		$.get("figure/del", {"id":recordId}, function(data) {
			if (data.code == 0) {
				obj.closest("tr").remove();
				layer.msg("删除成功！");
			}else{
				layer.msg("删除失败！");
				return false;
			} 
		})
	}
}
function upRow(id){
	var type = $(".type").val();
	$.post("figure/upRow?id="+id,{type:type},function(data){
		if (data.code == 0) {
			search();
		} else {
			layer.msg("当前轮播图已经是最后一位！");
		}
   	});
}
function downRow(id){
	var type = $(".type").val();
	$.post("figure/downRow?id="+id,{type:type},function(data){
		if (data.code == 0) {
			search();
		} else {
			layer.msg("当前轮播图已经在第一位！");
			
		}
   	});
}
</script>
<script>
/* 图片上传*********************************************************** */
$("#imageupload").fileupload({
	dataType: 'json',
	maxFileSize : 5000000000, // 5 G，文件大小,这里没有用，在acceptFileSize限制文件大小
    add: function (e, data) {//将要上传的文件名显示在一个元素节点上：你可以经常要将上传的文件显示到特定的元素上，这个可以通过add回调函数来实现：
    	
    	var select = $("#type").val();//获取选择框数据
    	var uploadErrors = [];//创建一个包含错误类型的数组
 		var acceptFileTypes;//设置上传文件的类型
 		var acceptFileSize;
 		select = 2;
 		if (select==2) {
 			acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
 			acceptFileSize = 2*1024*1024;//2M
		}
 		//alert(1);
 		//console.log(data);
 		if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
 		   uploadErrors.push('文件类型不正确！');
 		  }
 		if(data.originalFiles[0]['size'] > acceptFileSize) {
 		   uploadErrors.push('文件太大了！');
 		  }
 		/* ----------------------------------------------------------------------------------------------------- */
   	 var files=data.files;
           for (var i = 0; i < files.length; i++) {
               var file = files[i];
               var reader = new FileReader();
               var ret = [];
               reader.onload = function(theFile) {
                   var image = new Image();
                   image.onload = function() {
                       width_fileInputId=this.width;
                       height_fileInputId=this.height;
                       //if(width_fileInputId == 1900 && height_fileInputId == 350){
                    	   if(uploadErrors.length > 0) {
                     		   alert(uploadErrors.join("\n"));
                     		   return false;
                     		  }else {
                     			 var numItems = $('.files .images_zone').length;//获取图片容器内的图片数量
                     			 if (select==2) {
                     		    	if(numItems>1){
                     		    		alert('每次只能上传1张');
                     		    		return false;
                     		    	}
                     			}
                     	 		//**************************自动上传**************************
                     	 		$('.up_progress .progress-bar').css('width','0px');//给进度条添加样式
                    		    $('.up_progress').show();//显示进度条
                    		    $('.up_progress .progress-bar').html('Uploading...');//显示进度条文字
                    		    data.submit(); 
                    		    //**************************自动上传**************************
                    		   
                    		}
                       /* }else{
                       	 alert("当前图片宽度"+width_fileInputId+"px,高度"+height_fileInputId+"px，请裁剪后再上传。否则无法通过审核。");
                       	return false;
                           // data.abort();	
                       } */
                   };
                   image.src = theFile.target.result;
               }
               reader.readAsDataURL(file);
           }
   	/* ------------------------------------------------------------------------------------------------- */
 		
    },
    done: function (e, data) {//完成之后的回调函数
    	var d = data.result;//获取的数据必须转为data.result才可以使用！！！
    	var select = $("#type").val();
    	select = 2;
    	$('.up_progress').hide();
    	$('.upl').remove();
        //var d = data.result;
        if (select==2) {
        	 var imgshow = '<div class="images_zone"><input type="hidden" id="img" name="figure.img" value="upload/image/'+d.content+'" /><span><img src="upload/image/'+d.content+'"  /></span><a href="javascript:;">删除</a></div>';
        	 $(".files").empty();
        	 jQuery('#image_path').append(imgshow);	//将上传之后的图片放到image_path容器中
        	 $("#image_fileDiv").addClass("hide");
 	 		 $("#image_reset").removeClass("hide");
        }
    },
    progressall: function (e, data) {//所有文件的总体上传进度(progressall)显示
    	console.log(data);
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('.up_progress .progress-bar').css('width',progress + '%');
    }
});
//图片删除
$('.files').on({
	mouseenter:function(){
		$(this).find('a').show();
	},
	mouseleave:function(){
		$(this).find('a').hide();
	},
},'.images_zone');
$('.files').on('click','.images_zone a',function(){
	$(this).parent().remove();
	$("#image_fileDiv").removeClass("hide");
});
function preview(){
	layer.msg("请稍后！");	
}
</script>